<template>
  <div class="auth-container">
    <el-card>
      <el-table
        :data="authList"
        style="width: 100%"
        border
        stripe
        :style="fontStyle"
      >
        <el-table-column align="center" label="#" type="index">
        </el-table-column>
        <el-table-column
          align="center"
          prop="authName"
          label="权限名称"
          width="width"
        >
        </el-table-column>
        <el-table-column align="center" prop="path" label="路径" width="width">
        </el-table-column>
        <el-table-column align="center" label="权限等级" width="width">
          <template slot-scope="{ row }">
            <el-tag v-if="row.level === '0'">一级</el-tag>
            <el-tag v-if="row.level === '1'" type="success">二级</el-tag>
            <el-tag v-if="row.level === '2'" type="warning">三级</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'auth',
  computed: {
    ...mapState('auth', ['authList']),
  },
  methods: {
    ...mapActions('auth', ['getAuthList']),
  },
  mounted() {
    this.getAuthList()
  },
}
</script>

<style></style>
